<template>
	<view class="waikdy">
		<view class="guding">
			<view class="toubusq">
				<view class="shenqnn" @click="goshenqqj('qingjiabiao')">
					<image class="tubcc" src="../../static/qingja.png"></image>
					<view>请假</view>
				</view>
				<view class="shenqnn" @click="goshenqqj('lizshenq')">
					<image class="tubcc" src="../../static/lizhi.png"></image>
					<view>离职</view>
				</view>
				<view class="shenqnn" @click="goshenqqj('qingjiabiao')">
					<image class="tubcc" src="../../static/xiujia.png"></image>
					<view>休徦</view>
				</view>
				<view class="shenqnn" @click="goshenqqj('yuzisq')">
					<image class="tubcc" src="../../static/yuzhi.png"></image>
					<view>预支</view>
				</view>
			</view>
			<view class="sqjil" v-if="dqjs==1">申请记录</view>
			<view class="shenqjl" v-if="dqjs>2">
				<view :class="dqxz==0?'xuanz':'weix'" @click="xuanzxlb(0)">我的申请</view>
				<view :class="dqxz==1?'xuanz':'weix'" @click="xuanzxlb(1)">我的审批</view>
			</view>
		</view>
		<view class="kegund" v-if="dqxz==0">
			<view class="sqlieb" v-for="item in sqjil" @click="chakzhuangt">
				<view class="shenq">
					<view class="leix">{{item.lx==1?'请假':item.lx==2?'离职':item.lx==3?'休假':'预支'}}</view>
					<view>{{item.sqly}}</view>
					<view class="hengxbj" v-if="item.lx==1||item.lx==3">
						<view>日期:2022/2/3-2022/2/5</view>
						<view class="tians">3天</view>
					</view>
					<view class="hengxbj" v-if="item.lx==2">
						<view>审请离职日期:2022/2/3</view>
					</view>
					<view class="hengxbj" v-if="item.lx==4">
						<view class="yuzigz">预支:3000元</view>
						<view class="zfqk">已转账</view>
					</view>
				</view>
				<view>{{item.zt}}</view>
			</view>
		</view>
		<view class="kegund" v-else>
			<view class="sqlieb" v-for="item in sqjil">
				<view class="shenq">
					<view class="qjrxx">
						<image class="qjrtoux" src="../../static/avatar.jpg" mode="aspectFill"></image>
						<view class="xinm">李桂芝</view>
						<view class="dianmc">广西大学店</view>
						<view class="zhiwu">理发师</view>
					</view>
					<view class="shenpilx">
						<view class="leix">{{item.lx==1?'请假':item.lx==2?'离职':item.lx==3?'休假':'预支'}}</view>
						<view>{{item.sqly}}</view>
					</view>
					<view class="hengxbj" v-if="item.lx==1||item.lx==3">
						<view>日期:2022/2/3-2022/2/5</view>
						<view class="tians">3天</view>
					</view>
					<view class="hengxbj" v-if="item.lx==2">
						<view>审请离职日期:2022/2/3</view>
					</view>
					<view class="hengxbj" v-if="item.lx==4">
						<view class="yuzigz">预支:3000元</view>
						<view class="zfqk">已转账</view>
					</view>
				</view>
				<view>
					<view class="tongyi" @click="shenpiliu(item.lx)">审批</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dqjs:0,
				dqxz:0,
				sqjil:[{
					zt:'审批中',
					lx:1,
					sqly:'家里表妹结婚'
				},{
					zt:'拒绝',
					lx:2,
					sqly:'不想做了'
				},{
					zt:'同意',
					lx:3,
					sqly:'休年假'
				},{
					zt:'同意',
					lx:4,
					sqly:'没钱用了'
				}]
			}
		},
		onLoad() {
			this.getuser();
		},
		methods: {
			getuser(){
				var that = this;
				uni.getStorage({
					key: 'key',
					success: function (res) {
						console.log(res)
						that.dqjs = res.data
					}
				})   
			},
			xuanzxlb(e){
				this.dqxz = e
			},
			goshenqqj(diz){
				uni.navigateTo({
					url:diz
				})
			},
			shenpiliu(lx){
				uni.navigateTo({
					url:'shenpiliuc?lx='+lx
				})
			},
			chakzhuangt(){
				uni.navigateTo({
					url:'shenpzt'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waikdy{
		width: 710rpx;
		padding: 0 20rpx;
		.guding{
			position: fixed;
			top: 44px;
			width: 710rpx;
			background: #ffffff;
			z-index: 99;
			.sqjil{
				margin-top: 20rpx;
				font-weight: bold;
			}
			.shenqjl{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 10rpx;
				.xuanz{
					border-bottom: solid 1rpx #ff007f;
					width: 250rpx;
					text-align: center;
					padding-bottom: 10rpx;
				}
				.weix{
					// border-bottom: solid 1rpx #ff007f;
					width: 250rpx;
					text-align: center;
					padding-bottom: 10rpx;
				}
			}
			.toubusq{
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 20rpx;
				.shenqnn{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
					color: #64666a;
					.tubcc{
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		.kegund{
			margin-top: 220rpx;
			.sqlieb{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f0f0f0;
				padding: 20rpx;
				margin-bottom: 20rpx;
				.tongyi{
					background: #007AFF;
					color: #fff;
					padding:30rpx 20rpx;;
					border-radius: 50rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
				}
				.jvjue{
					background: #ff0000;
					color: #fff;
					padding: 5rpx 30rpx;
					border-radius: 20rpx;
					font-size: 28rpx;
				}
				.shenq{
					font-size: 28rpx;
					.qjrxx{
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						.qjrtoux{
							width: 50rpx;
							height: 50rpx;
							border-radius: 25rpx;
							margin-right: 10rpx;
						}
						.xinm{
							font-weight: bold;
						}
						.dianmc{
							font-size: 25rpx;
							padding: 3rpx 20rpx;
							background: #2979FF;
							color: #ffffff;
							border-radius: 25rpx;
							margin-left: 20rpx;
						}
						.zhiwu{
							font-size: 25rpx;
							padding: 3rpx 20rpx;
							background: #ff007f;
							color: #ffffff;
							border-radius: 25rpx;
							margin-left: 20rpx;
						}
					}
					.shenpilx{
						display: flex;
						align-items: center;
						.leix{
							padding: 3rpx 20rpx;
							font-size: 25rpx;
							color: #ffffff;
							background: #2B85E4;
							border-radius: 20rpx;
							margin-right: 10rpx;
							// font-weight: bold;
						}
					}
					.leix{
						font-size: 30rpx;
						font-weight: bold;
					}
					.hengxbj{
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: #83868b;
						margin-top: 5rpx;
						.yuzigz{
							font-weight: bold;
							color: #ff007f;
						}
						.zfqk{
							margin-left: 20rpx;
							padding: 5rpx 20rpx;
							background: #cf9145;
							color: #ffffff;
							border-radius: 20rpx;
							
						}
						.tians{
							margin-left: 20rpx;
							padding: 5rpx 20rpx;
							background: #2979FF;
							color: #ffffff;
							border-radius: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
